<script setup lang="ts">
  import { useForm } from '@/services/pages/order/useGoodSettle'
  import { useGetModuleOptions } from '@/services/pages/order/useModule'
  import { FormInstance } from 'element-plus'
  import _ from 'lodash'
  import { ref } from 'vue'
  import { amountForamt } from '@/utils/tools'

  const { form, resetForm } = useForm()
  const { options, getOptionsLoading, getOptionsKeyword, getOptions } = useGetModuleOptions()

  defineOptions({
    name: 'GoodSettleCreateBaseInfo',
  })

  const emits = defineEmits<{
    (e: 'typeChange', value: 1 | 2): void
    (e: 'change-pay-network-price', value: string): void
  }>()

  // 支付网点费用
  const payNetworkPrice = ref('0')

  // 表单校验规则
  const rules = ref({
    name: [{ required: true, message: '请输入方案名称', trigger: ['blur', 'change'] }],
    moduleIds: [{ required: true, message: '请选择使用模块', trigger: ['blur', 'change'] }],
  })

  // 表单组件实例
  const formInstance = ref<FormInstance | null>(null)

  /**
   * 获取模块下拉选项
   */
  const handleGetModuleOptions = _.debounce((keyword: string) => {
    if (getOptionsKeyword.value !== keyword) {
      getOptionsKeyword.value = keyword
      getOptions()
    }
  }, 600)

  /**
   * 支付网点费用输入事件
   * @param {String} value - 网点费用
   */
  const handleChangePayNetworkPrice = (value: string) => {
    payNetworkPrice.value = amountForamt(value)
    emits('change-pay-network-price', payNetworkPrice.value)
  }

  defineExpose({
    resetForm,
    getForm: async () => {
      if (formInstance.value) {
        try {
          await formInstance.value.validate()
          return { ...form.value }
        } catch (error) {
          return null
        }
      }
      return null
    },
    getModuleOptions: getOptions,
    setForm: (param: OrderAPIRequest.GoodSettleForm) => {
      form.value = param
    },
    setPayNetworkPrice: (price: string) => {
      payNetworkPrice.value = price
    },
  })
</script>

<template>
  <div class="base-info-commodity-settle-create">
    <div class="title">基本信息</div>
    <el-form ref="formInstance" label-width="85" inline-message :model="form" :rules="rules">
      <!-- 方案名称 -->
      <el-form-item label="方案名称" prop="name">
        <el-input v-model.trim="form.name" placeholder="请输入方案名称" maxlength="15"></el-input>
      </el-form-item>

      <!-- 方案类型 -->
      <el-form-item label="方案类型" prop="type">
        <el-select
          v-model="form.type"
          :disabled="!!form.id"
          @change="emits('typeChange', form.type)"
        >
          <el-option :value="1" label="按产品名称"></el-option>
          <el-option :value="2" label="按产品分类"></el-option>
        </el-select>
      </el-form-item>

      <!-- 适用模块 -->
      <el-form-item label="适用模块" prop="moduleIds">
        <el-select
          v-model="form.moduleIds"
          placeholder="请选择模块"
          multiple
          collapse-tags
          collapse-tags-tooltip
          :max-collapse-tags="2"
          filterable
          :filter-method="handleGetModuleOptions"
          :loading="getOptionsLoading"
        >
          <el-option
            v-for="(moduleOption, moduleOptionIndex) in options"
            :key="moduleOptionIndex"
            :label="moduleOption.name"
            :value="moduleOption.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <!-- 描述 -->
      <el-form-item label="描述" prop="desc">
        <el-input
          v-model.trim="form.descr"
          type="textarea"
          placeholder="请输入描述"
          resize="both"
          maxlength="200"
          show-word-limit
        ></el-input>
      </el-form-item>

      <!-- 支付网点费用 -->
      <el-form-item label="支付网点费用" prop="payNetwork">
        <el-input
          placeholder="请填写支付网点费用"
          :model-value="payNetworkPrice"
          @input="handleChangePayNetworkPrice"
        ></el-input>
      </el-form-item>

      <!-- 方案状态 -->
      <el-form-item label="方案状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :value="false">启用</el-radio>
          <el-radio :value="true">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
  .base-info-commodity-settle-create {
    display: flex;
    flex-direction: column;
    row-gap: 12px;

    .title {
      font-size: 12px;
      font-weight: bold;
      padding-left: 6px;
      border-left: 3px solid $primaryColor;
    }

    :deep(.el-form) {
      flex-wrap: wrap;
      row-gap: 12px;
      box-sizing: border-box;
      padding: 0 32px;
      display: grid;
      grid-template-columns: repeat(auto-fill, 450px);
      justify-content: space-between;

      .el-form-item {
        .el-form-item__label {
          height: 28px;
          line-height: 28px;
        }

        .el-form-item__content {
          align-items: flex-start;

          .el-form-item__error {
            margin: 3px 0 0 0;
            padding: 0;
          }

          .el-select,
          .el-input {
            width: 100%;
          }

          .el-textarea {
            width: 100%;

            .el-textarea__inner {
              width: 100% !important;
              height: 28px;
              min-height: 28px !important;
              max-height: 200px !important;
            }
          }

          .el-radio-group {
            width: 100%;
            height: 28px;
            column-gap: 12px;

            .el-radio {
              height: 28px;
              margin: 0;
              column-gap: 5px;

              .el-radio__label {
                height: 28px;
                line-height: 28px;
                padding: 0;
              }
            }
          }
        }
      }
    }
  }
</style>
